<template>
  <div>
    <ul>
      <li v-for="item in state" :key="item.id">{{item.name}}</li>
    </ul>
    <p>{{state}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>


<script>
/**
 * 1.customRef 返回一个ref对象，可以显示地控制依赖追踪和触发响应
 */
import { ref, customRef } from "vue";
import { reactive } from "vue";

function myRef(value) {
  return customRef((track, trigger) => {
    //追踪 触发
    fetch("../public/data.json")
      .then(res => {
        // console.log(res);
        return res.json();
      })
      .then(data => {
        value = data;
        trigger();
        console.log(data);
      })
      .then(err => {
        console.log(err);
      });
    return {
      get() {
        track(); //告诉Vue这个数据是需要追踪变化的
        console.log("get", value);
        // 注意点
        // 不能在get方法中发送网络请求
        // 渲染界面 -> 调用get -> 发送网络请求
        // 保存数据 -> 更新接，Ian -> 调用get 存在循环更新的问题

        return value;
      },
      set(newValue) {
        console.log("set", newValue);
        value = newValue;
        trigger(); //告诉vue触发界面更新
      }
    };
  });
}
export default {
  name: "App",
  setup() {
    // let state = ref(18); //reactive({value:18})
    /** 
    let state = ref([]);
    fetch("../public/data.json")
          .then(res => {
            // console.log(res);
            return res.json();
          })
          .then(data => {
            data.value = data;
            trigger();
            console.log(data);
          })
          .then(err => {
            console.log(err);
          });
    */
    let state = myRef("../public/data.json");
    function myFn() {
      state.value += 1;
    }
    return { state, myFn };
  }
};
</script>
